import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { PaneProvider, Pane } from '@zendeskgarden/react-grid';
import { useArgs } from '@storybook/client-api';
import { PaneProviderStory } from './stories/PaneProviderStory';
import { PANES } from './stories/data';
import README from '../README.md';

<Meta
  title="Packages/Grid/PaneProvider"
  component={PaneProvider}
  subcomponents={{
    Pane,
    'Pane.Content': Pane.Content,
    'Pane.Splitter': Pane.Splitter,
    'Pane.SplitterButton': Pane.SplitterButton
  }}
  args={{
    panes: PANES,
    totalPanesWidth: 600,
    totalPanesHeight: 600
  }}
  argTypes={{
    panes: { name: 'Pane[]', table: { category: 'Story' } }
  }}
  parameters={{
    design: {
      allowFullscreen: true,
      type: 'figma',
      url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=8807%3A33252'
    }
  }}
/>

# API

<ArgsTable />

# Demo

## Uncontrolled

<Canvas>
  <Story
    name="Uncontrolled"
    args={{
      defaultColumnValues: {
        'column-a': 1,
        'column-b': 1
      },
      defaultRowValues: {
        'row-1': 1,
        'row-2': 1
      }
    }}
    argTypes={{ columnValues: { control: false }, rowValues: { control: false } }}
  >
    {args => <PaneProviderStory {...args} />}
  </Story>
</Canvas>

## Controlled

<Canvas>
  <Story
    name="Controlled"
    args={{
      columnValues: {
        'column-a': 1,
        'column-b': 1
      },
      rowValues: {
        'row-1': 1,
        'row-2': 1
      }
    }}
    argTypes={{ defaultColumnValues: { control: false }, defaultRowValues: { control: false } }}
  >
    {args => {
      const updateArgs = useArgs()[1];
      const handleChange = (rowValues, columnValues) => updateArgs({ rowValues, columnValues });
      return <PaneProviderStory {...args} onChange={handleChange} />;
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
